<template>
  <div>
    <div v-show="!isShowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="订单号:" prop="orderNo">
            <el-input v-model.trim="searchInfo.orderNo" clearable ref="input-orderNo" @keyup.enter.native="enterNextInput('merchantName')"></el-input>
          </el-form-item>
          <el-form-item label="采购商企业名称:" prop="merchantName">
            <el-input v-model.trim="searchInfo.merchantName" clearable ref="input-merchantName" @keyup.enter.native="enterNextInput('account')"></el-input>
          </el-form-item>
          <el-form-item label="创建人账号:" prop="account">
            <el-input v-model.trim="searchInfo.account" clearable ref="input-account" @keyup.enter.native="enterNextInput('enterpriseName')"></el-input>
          </el-form-item>
          <el-form-item label="订单状态:" prop="status">
            <el-select v-model="searchInfo.status" clearable placeholder="全部订单">
              <el-option label="已完成" value="0"></el-option>
              <el-option label="待付款" value="1"></el-option>
              <el-option label="待接单" value="2"></el-option>
              <el-option label="待发货" value="3"></el-option>
              <el-option label="待收货" value="4"></el-option>
              <el-option label="已关闭" value="-2"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date label="下单时间段:" :startTime.sync="searchInfo.startTime" :endTime.sync="searchInfo.endTime"></jxf-Date>
          <el-form-item label="供应商企业名称:" prop="enterpriseName">
            <el-input v-model.trim="searchInfo.enterpriseName" clearable ref="input-enterpriseName" @keyup.enter.native="enterNextInput('productName')"></el-input>
          </el-form-item>
          <el-form-item label="城市:" prop="cityId" v-if="isShowCity">
            <el-select v-model="searchInfo.cityId" filterable clearable placeholder="全部" @focus="getCityList">
              <el-option v-for="item in cityList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <jxf-Date label="支付时间段:" :startTime.sync="searchInfo.payStartTime" :endTime.sync="searchInfo.payEndTime" startTimeProp="payStartTime" endTimeProp="payEndTime"></jxf-Date>
          <el-form-item label="供应商门店名称:" prop="shopName">
            <el-input v-model="searchInfo.shopName" clearable ref="input-productName" @keyup.enter.native="onSearch"></el-input>
          </el-form-item>
          <el-form-item label="支付方式:" prop="payType">
            <el-select v-model="searchInfo.payType" clearable placeholder="全部">
              <el-option label="余额支付" value="0"></el-option>
              <el-option label="鲜丰惠支付" value="1"></el-option>
              <el-option label="信用支付" value="2"></el-option>
              <!--<el-option label="快捷支付" value="3"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="配送方式:" prop="deliveryType">
            <el-select v-model="searchInfo.deliveryType" clearable placeholder="全部配送方式">
              <el-option label="商家配送" value="0"></el-option>
              <el-option label="自提" value="1"></el-option>
              <el-option label="平台配送" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出订单</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="orderType" slot-scope="orderList">
            <div>{{orderList.row.orderType === 0 ? "普通订单" : "直通订单"}}</div>
          </template>
          <template slot="deliveryType" slot-scope="orderList">
            <div v-if="orderList.row.deliveryType === 0">商家配送</div>
            <div v-if="orderList.row.deliveryType === 1">自提</div>
            <div v-if="orderList.row.deliveryType === 2">平台配送</div>
          </template>
          <template slot="payType" slot-scope="orderList">
            <div v-if="orderList.row.payType === 0">余额支付</div>
            <div v-if="orderList.row.payType === 1">鲜丰惠支付</div>
            <div v-if="orderList.row.payType === 2">信用支付</div>
            <div v-else></div>
          </template>
          <template slot="status" slot-scope="orderList">
            <div v-if="orderList.row.status === 0">已完成</div>
            <div v-if="orderList.row.status === 1">待付款</div>
            <div v-if="orderList.row.status === 2">待接单</div>
            <div v-if="orderList.row.status === 3">待发货</div>
            <div v-if="orderList.row.status === 4">待收货</div>
            <div v-if="orderList.row.status === 6">已关闭</div>
            <div v-if="orderList.row.status === 7">已关闭</div>
            <div v-if="orderList.row.status === 8">已关闭</div>
            <div v-if="orderList.row.status === 9">已关闭</div>
            <div v-if="orderList.row.status === 10">已关闭</div>
            <div v-if="orderList.row.status === 11">已关闭</div>
          </template>
          <template slot="payTime" slot-scope="orderList">
            <div>{{orderList.row.payTime ? FormatDate.timeFormat(orderList.row.payTime) : ""}}</div>
          </template>
          <template slot="orderTime" slot-scope="orderList">
            <div>{{orderList.row.orderTime ? FormatDate.timeFormat(orderList.row.orderTime) : ""}}</div>
          </template>
          <!-- 运费 -->
          <template slot="freight" slot-scope="orderList">
            <div>￥{{orderList.row.freight && orderList.row.freight != 0 ? formatMoney.twoDecimal(orderList.row.freight) : '0.00'}}</div>
          </template>
          <!-- 实付金额 -->
          <template slot="orderAmount" slot-scope="orderList">
            <div>￥{{ orderList.row.orderAmount && orderList.row.orderAmount != 0 ? formatMoney.twoDecimal(orderList.row.orderAmount) : '0.00'}}</div>
          </template>
          <!-- 实付金额 -->
          <template slot="payAmount" slot-scope="orderList">
            <div>{{orderList.row.payAmount && orderList.row.payAmount != "null" ? "￥" + formatMoney.twoDecimal(orderList.row.payAmount) : ''}}</div>
          </template>
          <template slot="operation" slot-scope="orderList">
            <el-button type="text" @click="watchDetail(orderList.row)">查看订单</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <OrderDetail :title="orderDetailTitle" :orderInfo="orderInfo" v-if="isShowDetail" @goBack="goBack" :dataInfo="dataInfo" @freshDetail="freshDetail"></OrderDetail>
  </div>
</template>

<script>
  import OrderDetail from './components/OrderDetail'
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'

    export default {
        name: "OrderList",
        components: { OrderDetail },
        data() {
          return {
            isShowCity: JSON.parse(window.localStorage.adminLogin).userType == '1' ? true : false,
            title: "订单列表",
            isShowDetail: false,
            orderDetailTitle: "",
            searchInfo: {
              account: "",
              cityId: "",
              deliveryType: "",
              endTime: "",
              enterpriseName: "",
              merchantName: "",
              orderNo: "",
              payEndTime: "",
              payStartTime: "",
              payType: "",
              shopName: "",
              startTime: "",
              status: ""
            },
            orderInfo: {},
            dataInfo: {},
            cityList: [],
            // 暂存订单信息
            orderZInfo: {},
            isSuccess: false,
            FormatDate: FormatDate,
            formatMoney: formatMoney,
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              tr: JSON.parse(window.localStorage.adminLogin).userType == '1' ? [
                {
                  id: '1',
                  label: '城市',
                  prop: 'cityName'
                },
                {
                  id: '2',
                  label: '订单号',
                  fixed: "left",
                  width: '188',
                  prop: 'orderNo'
                },
                {
                  id: '3',
                  label: '订单类型',
                  show: 'template',
                  prop: 'orderType'
                },
                {
                  id: '4',
                  label: '采购商企业名称',
                  minWidth: '140',
                  prop: 'merchantName'
                },
                {
                  id: '5',
                  label: '创建人账号',
                  width: '120',
                  prop: 'account'
                },
                {
                  id: '6',
                  label: '供应商企业名称',
                  minWidth: '120',
                  prop: 'enterpriseName'
                },
                {
                  id: '7',
                  label: '供应商门店名称',
                  minWidth: '140',
                  prop: 'shopName'
                },
                {
                  id: '8',
                  label: '订单应付金额',
                  width: '120',
                  show: 'template',
                  prop: 'orderAmount'
                },
                {
                  id: '9',
                  label: '订单实付金额',
                  minWidth: '120',
                  show: 'template',
                  prop: 'payAmount'
                },
                {
                  id: '10',
                  label: '运费',
                  width: '100',
                  show: 'template',
                  prop: 'freight'
                },
                {
                  id: '11',
                  label: '配送方式',
                  show: 'template',
                  prop: 'deliveryType'
                },
                {
                  id: '12',
                  label: '支付方式',
                  show: 'template',
                  prop: 'payType'
                },
                {
                  id: '13',
                  label: '支付时间',
                  show: 'template',
                  width: '160',
                  prop: 'payTime'
                },
                {
                  id: '14',
                  label: '订单状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '15',
                  label: '下单时间',
                  show: 'template',
                  width: '160',
                  prop: 'orderTime'
                },
                {
                  id: '16',
                  label: '操作',
                  show: 'template',
                  fixed: 'right',
                  minWidth:"100",
                  prop: 'operation'
                }
              ] : [
                {
                  id: '2',
                  label: '订单号',
                  fixed: "left",
                  prop: 'orderNo'
                },
                {
                  id: '3',
                  label: '订单类型',
                  show: 'template',
                  prop: 'orderType'
                },
                {
                  id: '4',
                  minWidth: '140',
                  label: '采购商企业名称',
                  prop: 'merchantName'
                },
                {
                  id: '5',
                  minWidth: '100',
                  label: '创建人账号',
                  prop: 'account'
                },
                {
                  id: '6',
                  minWidth: '140',
                  label: '供应商企业名称',
                  prop: 'enterpriseName'
                },
                {
                  id: '7',
                  minWidth: '140',
                  label: '供应商门店名称',
                  prop: 'shopName'
                },
                {
                  id: '8',
                  minWidth: '120',
                  label: '订单应付金额',
                  show: 'template',
                  prop: 'orderAmount'
                },
                {
                  id: '9',
                  minWidth: '120',
                  label: '订单实付金额',
                  show: 'template',
                  prop: 'payAmount'
                },
                {
                  id: '10',
                  label: '运费',
                  show: 'template',
                  prop: 'freight'
                },
                {
                  id: '11',
                  label: '配送方式',
                  show: 'template',
                  prop: 'deliveryType'
                },
                {
                  id: '12',
                  label: '支付方式',
                  show: 'template',
                  prop: 'payType'
                },
                {
                  id: '13',
                  label: '支付时间',
                  show: 'template',
                  prop: 'payTime'
                },
                {
                  id: '14',
                  label: '订单状态',
                  show: 'template',
                  prop: 'status'
                },
                {
                  id: '15',
                  label: '下单时间',
                  show: 'template',
                  prop: 'orderTime'
                },
                {
                  id: '16',
                  label: '操作',
                  show: 'template',
                  fixed: 'right',
                  minWidth:"200",
                  prop: 'operation'
                }
              ],
              data: []
            },
            pageTotal:0,
            pageSize:10,
            currentPage:1
          }
        },
        methods: {
          // 刷新详情页面
          freshDetail() {
            this.watchDetail(this.orderZInfo)
          },
          // 获取所有的城市
          getCityList() {
            let data = {
              type: 5
            };
            ajax.post(apis.product.getCityById, data).then((res) => {
              if(res.code === "10000000") {
                this.cityList = res.data;
              } else {
                this.$message.error(res.message)
              }
            })
          },
          // 导出订单
          exportExcel() {
            this.isSuccess = true;
            let data = {
              ...this.searchInfo
            };
            ajax.export(apis.order.exportExcel, data).then((res) => {
              this.isSuccess = false;
              if(res.code) {
                if(res.code === "10000000") {

                } else {
                  this.$message.error(res.message)
                }
              }
            })
          },
          refreshFuc() {
            this.resetForm('searchInfo');
            this.pageSize = 10;
            this.currentPage = 1;
            this.getData()
          },
          enterNextInput(inputName) {
            this.$refs["input-" + inputName].focus();
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              page: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.order.getOrderList, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false;
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          // 查看详情
          watchDetail(obj) {
            this.orderZInfo = obj;
            if(obj.status === 0) {
              this.orderDetailTitle = "已完成";
            } else if(obj.status === 1) {
              this.orderDetailTitle = "待付款";
            } else if(obj.status === 2) {
              this.orderDetailTitle = "待接单";
            } else if(obj.status === 3) {
              this.orderDetailTitle = "待发货";
            } else if(obj.status === 4) {
              this.orderDetailTitle = "待收货";
            } else if(obj.status === 6) {
              this.orderDetailTitle = "已关闭";
            } else if(obj.status === 7) {
              this.orderDetailTitle = "已关闭";
            } else if(obj.status === 8) {
              this.orderDetailTitle = "已关闭";
            } else if(obj.status === 9) {
              this.orderDetailTitle = "已关闭";
            } else {
              this.orderDetailTitle = "已关闭";
            }
            let data = {
              orderId: obj.orderId
            }
            ajax.get(apis.order.orderDetail, data).then(res => {
              // let status;
              if(res.code === '10000000') {
                this.dataInfo = res.data;
                if (res.data.status == 6 || res.data.status == 7 || res.data.status == 8 || res.data.status == 9 || res.data.status == 10 || res.data.status == 11) {
                  this.orderInfo = {
                    stepInfo: {
                      status: 5,
                      info: [
                        {
                          title: '待接单',
                          dateTime: res.data.orderTime ? FormatDate.timeFormat(res.data.orderTime) : ""
                        }, {
                          title: '供应商接单',
                          dateTime: res.data.takingTime ? FormatDate.timeFormat(res.data.takingTime) : ""
                        }, {
                          title: '供应商发货',
                          dateTime: res.data.sendTime ? FormatDate.timeFormat(res.data.sendTime) : ""
                        }, {
                          title: '采购商收货',
                          dateTime: res.data.sureTime ? FormatDate.timeFormat(res.data.sureTime) : ""
                        }, {
                          title: '已关闭',
                          dateTime: res.data.cancelTime ? FormatDate.timeFormat(res.data.cancelTime) : ""
                        }
                      ]
                    }
                  }
                } else if (res.data.status == 1) {
                  this.orderInfo = {
                    stepInfo: {
                      status: 4,
                      info: [
                        {
                          title: '待接单',
                          dateTime: res.data.orderTime ? FormatDate.timeFormat(res.data.orderTime) : ""
                        }, {
                          title: '供应商接单',
                          dateTime: res.data.takingTime ? FormatDate.timeFormat(res.data.takingTime) : ""
                        }, {
                          title: '供应商发货',
                          dateTime: res.data.sendTime ? FormatDate.timeFormat(res.data.sendTime) : ""
                        }, {
                          title: '采购商收货',
                          dateTime: res.data.sureTime ? FormatDate.timeFormat(res.data.sureTime) : ""
                        }, {
                          title: '采购商支付',
                          dateTime: res.data.payTime ? FormatDate.timeFormat(res.data.payTime) : ""
                        }
                      ]
                    }
                  }
                } else if (res.data.status == 0) {
                  this.orderInfo = {
                    stepInfo: {
                      status: 5,
                      info: [
                        {
                          title: '待接单',
                          dateTime: res.data.orderTime ? FormatDate.timeFormat(res.data.orderTime) : ""
                        }, {
                          title: '供应商接单',
                          dateTime: res.data.takingTime ? FormatDate.timeFormat(res.data.takingTime) : ""
                        }, {
                          title: '供应商发货',
                          dateTime: res.data.sendTime ? FormatDate.timeFormat(res.data.sendTime) : ""
                        }, {
                          title: '采购商收货',
                          dateTime: res.data.sureTime ? FormatDate.timeFormat(res.data.sureTime) : ""
                        }, {
                          title: '采购商支付',
                          dateTime: res.data.payTime ? FormatDate.timeFormat(res.data.payTime) : ""
                        }
                      ]
                    }
                  }
                } else if (res.data.status == 3) {
                  this.orderInfo = {
                    stepInfo: {
                      status: 2,
                      info: [
                        {
                          title: '待接单',
                          dateTime: res.data.orderTime ? FormatDate.timeFormat(res.data.orderTime) : ""
                        }, {
                          title: '供应商接单',
                          dateTime: res.data.takingTime ? FormatDate.timeFormat(res.data.takingTime) : ""
                        }, {
                          title: '供应商发货',
                          dateTime: res.data.sendTime ? FormatDate.timeFormat(res.data.sendTime) : ""
                        }, {
                          title: '采购商收货',
                          dateTime: res.data.sureTime ? FormatDate.timeFormat(res.data.sureTime) : ""
                        }, {
                          title: '采购商支付',
                          dateTime: res.data.payTime ? FormatDate.timeFormat(res.data.payTime) : ""
                        }
                      ]
                    }
                  }
                } else if (res.data.status == 4) {
                  this.orderInfo = {
                    stepInfo: {
                      status: 3,
                      info: [
                        {
                          title: '待接单',
                          dateTime: res.data.orderTime ? FormatDate.timeFormat(res.data.orderTime) : ""
                        }, {
                          title: '供应商接单',
                          dateTime: res.data.takingTime ? FormatDate.timeFormat(res.data.takingTime) : ""
                        }, {
                          title: '供应商发货',
                          dateTime: res.data.sendTime ? FormatDate.timeFormat(res.data.sendTime) : ""
                        }, {
                          title: '采购商收货',
                          dateTime: res.data.sureTime ? FormatDate.timeFormat(res.data.sureTime) : ""
                        }, {
                          title: '采购商支付',
                          dateTime: res.data.payTime ? FormatDate.timeFormat(res.data.payTime) : ""
                        }
                      ]
                    }
                  }
                } else if(res.data.status == 2) {
                  this.orderInfo = {
                    stepInfo: {
                      status: 1,
                      info: [
                        {
                          title: '待接单',
                          dateTime: res.data.orderTime ? FormatDate.timeFormat(res.data.orderTime) : ""
                        }, {
                          title: '供应商接单',
                          dateTime: res.data.takingTime ? FormatDate.timeFormat(res.data.takingTime) : ""
                        }, {
                          title: '供应商发货',
                          dateTime: res.data.sendTime ? FormatDate.timeFormat(res.data.sendTime) : ""
                        }, {
                          title: '采购商收货',
                          dateTime: res.data.sureTime ? FormatDate.timeFormat(res.data.sureTime) : ""
                        }, {
                          title: '采购商支付',
                          dateTime: res.data.payTime ? FormatDate.timeFormat(res.data.payTime) : ""
                        }
                      ]
                    }
                  }
                }
                this.isShowDetail = true
              } else {
                this.$message.error(res.message)
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
            this.searchInfo.orderNo = ""
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
            this.getData()
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
            this.getData()
          },
          // 详情返回上一页
          goBack() {
            this.orderZInfo = {}
            this.isShowDetail = false
          }
        },
        created() {
          this.searchInfo.orderNo = this.$route.params && this.$route.params.orderNo ? this.$route.params.orderNo : ""
          this.onSearch();
        }
    }
</script>

<style lang="scss" scoped>

</style>
